 <!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-24 08:46:02
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2022-08-19 16:39:05
 * @FilePath: \jzjypc4.0\src\views\ProductCenter\classOnline.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container">
    <div class="tips">
      <el-dialog
        :visible.sync="dialogVisible"
        width="400px"
        :before-close="handleClose"
        :close-on-click-modal="tipsClose"
      >
        <h2>添加客服微信</h2>
        <img :src="kf_file_url" alt="" />
        <p>添加客服微信，获取更多资讯</p>
      </el-dialog>
    </div>
    <div class="bread">
      <span>当前位置：</span>
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/product' }"
          >产品中心</el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="top">
      <div class="box1">
        <img :src="file_url" alt="" />
        <div class="msg">
          <div class="title">
            <!-- <span>高中语文</span> -->
            <h2>{{ title }}</h2>
          </div>
          <p>{{ lnum }}人已学</p>
          <span>{{ synopsis }}</span>
        </div>
        <div class="shenling" @click="getbook">点击咨询客服</div>
      </div>
    </div>
    <div class="content">
      <div class="ctTop">
        <span>产品详情</span>
      </div>
      <div class="contents" v-html="contents">
        
      </div>
      <div class="biaoji"></div>
      <div class="nothing" v-if="nothingShow">
        <p>暂无精听内容，详情请咨询客服！</p>
        <img src="../../assets/img/nothing.png">
        <div class="biaoji"></div>
      </div>
      <div class="seemore">
        <p>
          添加客服微信联系方式，获取更多资源福利内容，并且及时推送最新资源和反馈消息
        </p>
        <span class="shenling" @click="getbook">点击咨询客服</span>
      </div>
    </div>
  </div>
</template>

<script>
import { sysinfo,bookdetail } from "../../api/http.js";
export default {
  data() {
    return {
      jtxlyId: "", //精听训练营id
      title: "", //标题
      synopsis: "", //简介
      lnum: 0, //学习人数
      dialogVisible: false,
      tipsClose: true,
      playFlag: true,
      file_url: "", //封面图
      contents:'',//精听内容
      nothingShow:false,//空图显示隐藏
      kf_file_url:'',//客服微信
    };
  },
  created() {
    console.log(this.$route.query);
    this.jtxlyId = this.$route.query.id;
    //获取客服微信二维码
    sysinfo().then((res) => {
      this.kf_file_url = res.retRes.kf_file_url;
    });
    //获取精听训练营详情
    bookdetail({
      md5key: localStorage.getItem("md5key"),
      id: this.jtxlyId,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "精听训练营详情");
        const data = res.retRes;
        this.title = data.title;
        this.synopsis = data.synopsis;
        this.lnum = data.lnum;
        this.file_url = data.file_url;
        this.contents= data.contents
        if(data.contents == ""){
          this.nothingShow = true
        }else{
          this.nothingShow = false
        }
      }
    });
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    //滑轮滚动监听位移距离
    handleScroll() {
      let seemore = document.getElementsByClassName("seemore")[0];
      let box = document.getElementsByClassName("biaoji")[0];
      const offset = box.getBoundingClientRect();
      const offsetTop = offset.top;
      const offsetBottom = offset.bottom;
      //进入可视区
      if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
        seemore.style.position = "relative";
      } else {
        seemore.style.position = "fixed";
      }
    },
    //弹窗隐藏
    handleClose() {
      this.dialogVisible = false;
    },
    //申领图书弹窗
    getbook() {
      this.dialogVisible = true;
    },
    //视频播放按钮
    startvideo() {
      console.log(this.$refs.startvideo);
      this.$refs.startvideo.play();
      this.playFlag = false;
      // if (this.$refs.startvideo[0].paused) {
      //   this.$refs.startvideo[0].play();
      // } else {
      //   this.$refs.startvideo[0].pause();
      // }
    },
  },
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
</style>
<style lang="less" scoped>
#container {
  height: 100%;
  background-color: #f0f0f5;
  .tips {
    text-align: center;
    border-radius: 20px;
    overflow: hidden;
    /deep/.el-dialog {
      border-radius: 20px;
    }
    /deep/.el-dialog__header {
      padding: 0;
    }
    /deep/.el-dialog__body {
      padding: 0;
    }
    h2 {
      padding: 50px 0;
      font-size: 20px;
      color: #fff;
      background-color: #46e2b4;
      border-radius: 20px 20px 0px 0px;
    }
    img {
      margin: 40px 0 20px 0;
      width: 200px;
      height: 200px;
    }
    p {
      padding-bottom: 45px;
      font-size: 16px;
      text-align: center;
    }
  }
  .bread {
    display: flex;
    margin: 20px auto;
    width: 1200px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    // font-weight: 400;
    color: #626366;
    line-height: 24px;
    .el-breadcrumb {
      font-size: 14px;
      line-height: 24px;
      /deep/.el-breadcrumb__item:last-child {
        .el-breadcrumb__inner {
          color: #08a579;
        }
      }
      /deep/.el-breadcrumb__inner.is-link {
        font-weight: normal;
      }
    }
  }
  .top {
    .box1 {
      margin: 20px auto;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      background-color: #fff;
      width: 1200px;
      height: 150px;
      cursor: pointer;
      img {
        margin: 20px;
        // width: 84px;
        max-height: 110px;
      }
      .msg {
        flex: 1;
        height: 140px;
        .title {
          display: flex;
          margin: 20px 0;
          font-weight: 600;
          h2 {
            font-size: 16px;
            color: #333333;
          }
          span {
            text-align: center;
            width: 72px;
            height: 20px;
            background: #7393f0;
            border-radius: 4px;
            font-size: 14px;
            color: #fff;
          }
        }
        p {
          margin-bottom: 25px;
          font-size: 13px;
          color: #666;
        }
        span {
          display: inline-block;
          color: #666;
        }
      }
      .shenling {
        margin-right: 30px;
        width: 120px;
        height: 40px;
        background: #f85230;
        border-radius: 4px;
        text-align: center;
        color: #fff;
        line-height: 40px;
        font-size: 16px;
      }
    }
  }
  .content {
    margin: 0 auto;
    margin-bottom: 20px;
    width: 1200px;
    background: #ffffff;
    // border: 1px solid #dee0e3;
    overflow: hidden;
    .ctTop {
      border-bottom: 1px solid #dee0e3;
      span {
        display: inline-block;
        line-height: 38px;
        width: 120px;
        height: 38px;
        background: #08a579;
        color: #fcfcfc;
        text-align: center;
        font-size: 14px;
      }
    }
    .contents {
      border-top: 0;
      text-align: center;
      img {
        margin-top: 40px;
        max-width: 100% !important;
        height: auto !important;
      }
      .biaoji {
        width: 1200px;
      }
    }
    .nothing{
      text-align: center;
      p{
        margin: 20px auto;
        font-size: 14px;
        text-align: center;
      }
      img{
        margin-top: 30px;
      }
    }
    .seemore {
      position: fixed;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0;
      //   top: 0;
      width: 1200px;
      background-color: #fff;
      p {
        margin-left: 20px;
        font-size: 14px;
        color: #646566;
        line-height: 60px;
      }
      .shenling {
        margin-right: 20px;
        width: 120px;
        height: 40px;
        background: #f85230;
        border-radius: 4px;
        text-align: center;
        color: #fff;
        line-height: 40px;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
}
</style>